<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: minHeight + 'px', 'overflow-y': 'hidden' }"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  minHeight: {
    type: Number,
    default: 300
  },
  mode: {
    type: String,
    default: 'default' // or 'simple'
  }
})

const emit = defineEmits(['update:modelValue'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const valueHtml = ref('')

watch(() => props.modelValue, (newVal) => {
  valueHtml.value = newVal
}, { immediate: true })

// 工具栏配置
const toolbarConfig = {
  // 插入图片的菜单配置
  insertKeys: {
    index: 5, // 插入的位置，基于当前的 toolbarKeys
    keys: ['uploadImage'] // "上传图片"菜单
  }
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      server: import.meta.env.VITE_APP_BASE_API + '/file/upload/oss',
      fieldName: 'file',
      maxFileSize: 10 * 1024 * 1024, // 10M
      allowedFileTypes: ['image/*'],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      timeout: 30 * 1000, // 30秒超时
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        console.log('图片上传响应:', res)
        try {
          if (res && res.code === 200) {
            // 从 res 中找到 url alt href ，然后插入图片
            const imageUrl = res.url || res.data?.url || res.data
            if (imageUrl) {
              const altText = res.originalFilename || res.fileName || '图片'
              insertFn(imageUrl, altText, imageUrl)
              console.log('图片插入成功:', imageUrl)
              ElMessage.success('图片上传成功')
            } else {
              console.error('响应中未找到图片URL:', res)
              ElMessage.error('图片上传失败：未获取到图片地址')
            }
          } else {
            console.error('图片上传失败:', res)
            const errorMsg = res?.msg || res?.message || '图片上传失败'
            ElMessage.error(errorMsg)
          }
        } catch (error) {
          console.error('处理上传响应时出错:', error)
          ElMessage.error('图片上传处理失败')
        }
      },
      onBeforeUpload(file) {
        console.log('准备上传图片 - 原始参数:', file)
        console.log('参数类型:', typeof file)
        console.log('参数键:', file ? Object.keys(file) : 'null/undefined')
        
        try {
          // 简化处理逻辑，直接返回true让上传继续
          // 因为WangEditor的文件验证可能有特殊的数据结构
          
          // 如果能获取到文件名，进行基本检查
          let fileName = ''
          let fileSize = 0
          
          if (file) {
            // 尝试多种方式获取文件名
            fileName = file.name || file.fileName || file.originalName || ''
            fileSize = file.size || file.fileSize || 0
            
            // 如果有嵌套的文件对象
            if (file.data) {
              fileName = fileName || file.data.name || ''
              fileSize = fileSize || file.data.size || 0
            }
            if (file.file) {
              fileName = fileName || file.file.name || ''
              fileSize = fileSize || file.file.size || 0
            }
          }
          
          console.log('提取的文件信息:', { fileName, fileSize })
          
          // 如果能获取到文件名，检查扩展名
          if (fileName) {
            const isImageByExt = /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(fileName)
            if (!isImageByExt) {
              console.log('文件扩展名检查失败:', fileName)
              ElMessage.error('只能上传图片文件 (jpg, png, gif, bmp, webp)!')
              return false
            }
          }
          
          // 如果能获取到文件大小，检查大小
          if (fileSize > 0) {
            const maxSize = 10 * 1024 * 1024 // 10MB
            if (fileSize > maxSize) {
              console.log('文件大小检查失败:', { fileSize, maxSize })
              ElMessage.error(`图片大小不能超过 10MB! 当前大小: ${(fileSize / 1024 / 1024).toFixed(2)}MB`)
              return false
            }
          }
          
          console.log('文件验证通过')
          return true
        } catch (error) {
          console.error('文件检查出错:', error)
          // 出错时也允许上传，避免阻塞正常功能
          console.log('验证出错，允许上传继续')
          return true
        }
      },
      onProgress(progress) {
        console.log('上传进度:', progress)
      },
      onSuccess(file, res) {
        console.log('上传成功:', file, res)
      },
      onFailed(file, res) {
        console.log('上传失败:', file, res)
        ElMessage.error('图片上传失败: ' + (res.msg || '未知错误'))
      },
      onError(file, err, res) {
        console.log('上传错误:', file, err, res)
        const errorMsg = err?.message || err?.toString() || '未知错误'
        ElMessage.error('图片上传出错: ' + errorMsg)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  
  // 监听编辑器焦点，动态更新token
  editor.on('focus', updateToken)
}

const handleChange = (editor) => {
  emit('update:modelValue', valueHtml.value)
}

// 动态更新token
const updateToken = () => {
  const editor = editorRef.value
  if (editor) {
    const uploadImageConf = editor.getMenuConfig('uploadImage')
    if (uploadImageConf) {
      uploadImageConf.headers = {
        Authorization: 'Bearer ' + getToken()
      }
    }
  }
}
</script>

<style scoped>
</style>